import { defineComponent, ref, watch, PropType } from "vue";
import Style from './index.module.scss';
import {useWebPage} from "@/utils/hooks";

export default defineComponent({
    // 1. 定义接收的props（从父组件获取当前页码、总页数、自定义样式）
    props: {
        pageSize: {
            type: Number,
            default: 10 // 每页显示10条数据
        },
        /** 显示的数据 */
        Data: {
            type: Array as PropType<any[]>,
            default: []
        },
        customClass: {
            type: String,
            default: '' // 自定义外层样式类
        },

    },
    // 2. 定义触发的事件（向父组件传递新页码）
    emits: ['pageChange'],

    setup(props, { emit }) {
        // 分页上按钮激活状态
        const id3 = ref(-1);
        // 分页下按钮激活状态
        const id4 = ref(-1);
        const newDatas = ref()
        // 1. 将pageConfig定义为ref，支持响应式更新
        const pageConfig = ref<any>(useWebPage(props.pageSize, newDatas.value));

        // 2. 监听数据源变化，更新newDatas并重新初始化分页配置
        watch(() => props.Data, (newData) => {
            id4.value = 2; //重置下一页激活状态
            newDatas.value = newData || [];
            // 数据变化时重新创建分页配置
            pageConfig.value = useWebPage(props.pageSize, newDatas.value);
            if (pageConfig.value.page === 1){
                id4.value = -1 ; // 取消下一页激活状态
            }
        }, { immediate: true });

        //监听分页返回数据变化
        watch(() => pageConfig.value.showData, (newShowData) => {
            emit('pageChange', newShowData);
        }, { immediate: true });

        // 3. 监听父组件传递的page变化：同步更新按钮状态（如页码=1时禁用上一页）
        watch(() => pageConfig.value.pageNum, (newPageNum) => {

            if(pageConfig.value.pageNum >=1 && pageConfig.value.pageNum < pageConfig.value.page){
                id4.value = 2; // 激活下一页按钮
            }
            if (pageConfig.value.pageNum >1){
                id3.value = 1; // 激活上一页按钮
            }
            if (newPageNum === 1) {
                id3.value = -1; // // 页码=1时，上一页按钮置灰取消上一页激活状态
            }
            if (newPageNum === pageConfig.value.page) {
                id4.value = -1; // 取消下一页激活状态// 页码=总页数时，下一页按钮置灰
            }
        }, { immediate: true }); // immediate：初始化时立即执行


        // 4. 上一页点击事件
        const handlePrevPage = () => {
            if (pageConfig.value.pageNum <= 1) return; // 边界：页码不能小于1

            if (pageConfig.value.pageNum > 1) {
                pageConfig.value.pageNum--;
                pageConfig.value.turn();
            }
        };

        // 5. 下一页点击事件
        const handleNextPage = () => {
            if (pageConfig.value.pageNum >= pageConfig.value.page) return; // 边界：页码不能大于总页数

            // if (pageConfig.value.pageNum < Math.ceil(pageConfig.value.total / pageConfig.value.pageSize)) {
                pageConfig.value.pageNum++;
                pageConfig.value.turn();
            // }
        };
        return () => (
            // 应用父组件传递的自定义样式类
            <div class={[Style.footer, props.customClass]}>
                {/* 上一页 */}
                <div
                    class={[
                        Style.tag_small,
                        Style.fontStyle2,
                        id3.value === 1 ? Style.tag_active : "",
                    ]}
                    onClick={handlePrevPage}
                    style={{ cursor: pageConfig.value.pageNum === 1 ? 'not-allowed' : 'pointer' }} // 鼠标样式优化
                >
                    上一页
                </div>

                {/* 页码显示：从props获取当前页码和总页数 */}
                <div class={Style.centerwrapper}>
                    <div class={Style.center}>
                        第{pageConfig.value.pageNum}页 / 共{pageConfig.value.page}页
                    </div>
                </div>

                {/* 下一页 */}
                <div
                    style={{ textAlign: "left" }}
                    class={[
                        Style.tag_small,
                        Style.fontStyle2,
                        id4.value === 2 ? Style.tag_active : "",
                    ]}
                    onClick={handleNextPage}
                >
                    下一页
                </div>
            </div>
        );
    },
});
